<template>
  <div :class="isPhoneType ? 'login phone_login' : 'login'">
    <!-- pc样式 -->
    <div v-if="!isPhoneType" class="center_bg">
      <div class="c_left">
        <img src="@/assets/images/l_icon.png" alt="" />
      </div>
      <div class="c_right">
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
        >
          <div class="logo-div">
            <img src="../assets/images/logo_icon.png" alt="" />
            <div class="title">
              <p>N5-N7</p>
              <p>参展报名系统</p>
            </div>
          </div>
          <el-form-item prop="username">
            <div class="label_css">单位名称</div>
            <el-input
              v-model="loginForm.username"
              type="text"
              auto-complete="off"
              placeholder="请输入单位名称"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <div class="label_css">密码</div>
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              show-password
              @keyup.enter.native="handleLogin"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="code" v-if="captchaEnabled">
            <div class="label_css">验证码</div>
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              style="width: calc(100% - 105px)"
              @keyup.enter.native="handleLogin"
            >
            </el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" class="login-code-img" />
            </div>
          </el-form-item>

          <el-form-item style="width: 100%; margin-top: 20px">
            <el-button
              class="login-btn"
              :loading="loading"
              size="medium"
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>

            <div
              style="
                float: left;
                color: #1890ff;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="downPdf"
            >
              操作手册下载
            </div>

            <div
              style="
                float: right;
                color: #1890ff;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="handleForget"
            >
              忘记密码
            </div>

            <div
              style="
                float: right;
                color: #1890ff;
                text-decoration: underline;
                cursor: pointer;
                margin-right: 10px;
              "
              @click="handleOpen"
            >
              立即注册
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 手机端样式 -->
    <div v-if="isPhoneType" class="center_bg wxroot_css">
      <div class="c_right">
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
        >
          <div class="logo-div">
            <img src="../assets/images/logo_icon.png" alt="" />
            <div class="title">
              <p>N5-N7</p>
              <p>参展报名系统</p>
            </div>
          </div>
          <el-form-item prop="username">
            <div class="label_css">单位名称</div>
            <el-input
              v-model="loginForm.username"
              type="text"
              auto-complete="off"
              placeholder="请输入单位名称"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <div class="label_css">密码</div>
            <el-input
              v-model="loginForm.password"
              type="password"
              auto-complete="off"
              placeholder="密码"
              show-password
              @keyup.enter.native="handleLogin"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="code" v-if="captchaEnabled">
            <div class="label_css">验证码</div>
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              style="width: calc(100% - 105px)"
              @keyup.enter.native="handleLogin"
            >
            </el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" class="login-code-img" />
            </div>
          </el-form-item>

          <el-form-item style="width: 100%; margin-top: 20px">
            <el-button
              class="login-btn"
              :loading="loading"
              size="medium"
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleLogin"
            >
              <span v-if="!loading">登 录</span>
              <span v-else>登 录 中...</span>
            </el-button>

            <div
              style="
                float: left;
                color: #1890ff;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="downPdf"
            >
              操作手册下载
            </div>

            <div
              style="
                float: right;
                color: #1890ff;
                text-decoration: underline;
                cursor: pointer;
              "
              @click="handleForget"
            >
              忘记密码
            </div>

            <div
              style="
                float: right;
                color: #1890ff;
                text-decoration: underline;
                cursor: pointer; margin-right: 10px;
              "
              @click="handleOpen"
            >
              立即注册
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!--  底部  -->
    <div class="el-login-footer"></div>

    <!-- 注册弹框 -->
    <el-dialog
      title="注册账号"
      :visible.sync="open"
      :width="isPhoneType ? '99%' : '600px'"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        :label-position="isPhoneType ? 'top' : 'right'"
        :class="isPhoneType ? 'wxForm_css' : ''"
      >
        <el-form-item label="单位名称" prop="username" class="lo_form_css">
          <el-input v-model="form.username" placeholder="请输入单位名称" />
          <span :class="isPhoneType ? 'text_css text_css_14' : 'text_css'">
            说明：请填写报名单位、企业全称
          </span>
        </el-form-item>
        <el-form-item label="密码 " prop="password">
          <el-input
            v-model="form.password"
            type="password"
            auto-complete="off"
            placeholder="请输入密码"
            show-password
            @keyup.enter.native="submitForm"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="form.confirmPassword"
            type="password"
            auto-complete="off"
            placeholder="确认密码"
            show-password
            @keyup.enter.native="submitForm"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="form.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input
            v-model="form.code"
            auto-complete="off"
            placeholder="请输入验证码"
            style="width: 200px; float: left"
            @keyup.enter.native="submitForm"
          >
          </el-input>
          <div class="msg_code" style="float: left; margin-left: 10px">
            <span v-if="showCode" class="one_span" @click="getPhone">
              获取验证码
            </span>
            <span v-else class="two_span">{{ minute }}s后获取</span>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          :loading="reLoading"
          @click="submitForm"
        >
          <span v-if="!reLoading">立即注册</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <el-button size="small" @click="open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 滑块验证 -->
    <Vcode :show="isOK" @success="success" style="z-index: 9999" />

    <!-- 忘记密码弹框 -->
    <el-dialog
      title="重置密码"
      :visible.sync="forgetOpen"
       :width="isPhoneType ? '99%' : '600px'"
      append-to-body
    >
      <el-form
        ref="forgetForm"
        :model="forgetForm"
        :rules="forgetRules"
        label-width="80px"
        :label-position="isPhoneType ? 'top' : 'right'"
        :class="isPhoneType ? 'wxForm_css' : ''"
      >
        <el-form-item label="单位名称" prop="username" class="lo_form_css">
          <el-input
            v-model="forgetForm.username"
            placeholder="请输入单位名称"
          />
          <span :class="isPhoneType ? 'text_css text_css_14' : 'text_css'">
            说明：请填写报名单位、企业全称
          </span>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="forgetForm.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input
            v-model="forgetForm.code"
            auto-complete="off"
            placeholder="请输入验证码"
            style="width: 200px; float: left"
            @keyup.enter.native="submitForget"
          >
          </el-input>
          <div class="msg_code" style="float: left; margin-left: 10px">
            <span
              v-if="showForgetCode"
              class="one_span"
              @click="getForgetPhone"
            >
              获取验证码
            </span>
            <span v-else class="two_span">{{ forgetMinute }}s后获取</span>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          :loading="btnLoading"
          @click="submitForget"
        >
          <span>重置密码</span>
        </el-button>
        <el-button size="small" @click="forgetOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { listConfig } from "@/api/system/config";
import { downloadUrl } from "@/utils/downUrl";
import { checkMobile } from "@/utils/index";

import { getCodeImg, getPhoneCode, resetPwd } from "@/api/login";
import { encryptData, decryptData } from "@/utils/aes";
import Vcode from "vue-puzzle-vcode";

export default {
  name: "Login",
  components: {
    Vcode,
  },
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.form.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };

    const checkPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入您的密码"));
      } else {
        let reg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,20}$/;
        if (!reg.test(value)) {
          callback(new Error("密码必须是8-20位，包含大小写字母和数字"));
        } else {
          callback();
        }
      }
    };

    return {
      codeUrl: "",
      loginForm: {
        username: "",
        password: "",
        code: "",
        type: 1,
      },

      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入单位名称" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
      },
      loading: false,
      redirect: undefined,

      open: false,
      form: {},
      rules: {
        username: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
          {
            min: 8,
            max: 16,
            message: "单位名称长度必须在8到16位之间",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, validator: checkPassword, trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, trigger: "blur", message: "请再次输入您的密码" },
          { required: true, validator: equalToPassword, trigger: "blur" },
        ],
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },

      enCode: "$2a$10$8.E5wm3KdfxL80Y1aIpqNezrPv5gMklZu0MbBWTJWA0SFwgGQ9Aue",
      reLoading: false,

      captchaEnabled: true,
      pdfUrl: "",
      resCodeUrl: "",
      isPhoneType: false,

      isOK: false,
      showCode: true,
      minute: 60,
      time: null,
      rightCode: "",

      // 忘记密码表单
      forgetOpen: false,
      forgetForm: {},
      forgetRules: {
        username: [
          { required: true, message: "请输入单位名称", trigger: "blur" },
          {
            min: 8,
            max: 16,
            message: "单位名称长度必须在8到16位之间",
            trigger: "blur",
          },
        ],
        code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },

      showForgetCode: true,
      forgetMinute: 60,
      forgetTime: null,
      forgetRightCode: "",
      btnLoading: false,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    this.isPhoneType = checkMobile();

    this.getCode();
    this.getCookie();
    this.getTemplate();
  },
  methods: {
    getCode() {
      getCodeImg().then((res) => {
        this.captchaEnabled =
          res.data.captchaEnabled === undefined
            ? true
            : res.data.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.data.img;
          this.loginForm.uuid = res.data.uuid;
        }
      });
    },

    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        enCode: this.enCode,
      };
    },

    // 提交登录
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              this.$router.push({ path: "/index" }).catch(() => {});
            })
            .catch(() => {
              this.loading = false;
              if (this.captchaEnabled) {
                this.getCode();
              }
            });
        }
      });
    },

    // 表单重置
    reset() {
      this.form = {
        username: undefined,
        password: undefined,
        enCode: this.enCode,
        code: undefined,
        uuid: undefined,
        type: 0,
        confirmPassword: undefined,
      };
      this.resetForm("form");

      this.isOK = false;
      this.showCode = true;
      this.minute = 60;
      this.time = null;
      this.rightCode = "";
    },

    handleOpen() {
      this.reset();
      this.open = true;
    },

    /** 提交注册 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.reLoading = true;
          if (this.form.code != this.rightCode) {
            this.$modal.msg("请输入正确的验证码");
            this.reLoading = false;
            return;
          }

          this.$store
            .dispatch("Login", this.form)
            .then(() => {
              this.$router.push({ path: "/index" }).catch(() => {});
            })
            .catch(() => {
              this.reLoading = false;
            });
        }
      });
    },

    // 获取模板地址
    getTemplate() {
      listConfig({ configKey: "sys.community" }).then((res) => {
        this.pdfUrl = res.rows[0].configValue;
      });
    },

    downPdf() {
      downloadUrl(this.pdfUrl, "N5-N7参展报名系统.pdf");
    },

    getPhone() {
      var text = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
      if (!this.form.mobile) {
        this.$modal.msg("请输入手机号");
      } else {
        if (!text.test(this.form.mobile)) {
          this.$modal.msg("请输入正确的手机号");
        } else {
          this.isOK = true;
        }
      }
    },

    imageLoad() {
      this.showCode = false;
      this.time = setInterval(() => {
        this.minute = this.minute - 1;
        if (this.minute === 0) this.clearTime();
      }, 1000);
    },

    clearTime() {
      clearInterval(this.time);
      this.showCode = true;
       this.minute = 60
    },

    success() {
      this.isOK = false;

      getPhoneCode({ mobile: this.form.mobile }).then((res) => {
        this.rightCode = decryptData(res.data);
        this.imageLoad();
      });
    },

    // 忘记密码弹框
    // 重置
    resetFor() {
      this.forgetForm = {
        username: undefined,
        mobile: undefined,
        code: undefined,
        password: undefined,
      };
      this.resetForm("forgetForm");

      this.showForgetCode = true;
      this.forgetMinute = 60;
      this.forgetTime = null;
      this.forgetRightCode = "";
      this.btnLoading = false;
    },

    // 忘记密码按钮
    handleForget() {
      this.resetFor();
      this.forgetOpen = true;
    },

    // 发送验证码
    getForgetPhone() {
      var text = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
      if (!this.forgetForm.mobile) {
        this.$modal.msg("请输入手机号");
      } else {
        if (!text.test(this.forgetForm.mobile)) {
          this.$modal.msg("请输入正确的手机号");
        } else {
          getPhoneCode({ mobile: this.forgetForm.mobile }).then((res) => {
            this.forgetRightCode = decryptData(res.data);
            this.forgetImgLoad();
          });
        }
      }
    },

    forgetImgLoad() {
      this.showForgetCode = false;
      this.forgetTime = setInterval(() => {
        this.forgetMinute = this.forgetMinute - 1;
        if (this.forgetMinute === 0) this.clearForTime();
      }, 1000);
    },

    clearForTime() {
      clearInterval(this.forgetTime);
      this.showForgetCode = true;
      this.forgetMinute = 60
    },

    submitForget() {
      this.$refs["forgetForm"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          if (this.forgetForm.code != this.forgetRightCode) {
            this.$modal.msg("请输入正确的验证码");
            this.btnLoading = false;
            return;
          }

          var param = {
            userName: this.forgetForm.username,
            mobile: encryptData(this.forgetForm.mobile),
          };

          resetPwd(param)
            .then((res) => {
              if (res.code === 200) {
                this.forgetForm.password = decryptData(res.data);
                this.forgetOpen = false;
                this.getModal();
              } else {
                this.$modal.msg(res.msg);
              }
            })
            .finally(() => {
              this.btnLoading = false;
            });
        }
      });
    },

    getModal() {
      const h = this.$createElement;
      this.$msgbox({
        title: "提示",
        message: h("p", null, [
          h("p", null, "账号：" + this.forgetForm.username),
          h("p", null, "您的密码已重置，请妥善保管"),
          h("p", null, " 新的密码：" + this.forgetForm.password),
        ]),

        showCancelButton: false,
        confirmButtonText: "一键复制",
        type: "success",
      })
        .then(() => {
          this.setCopy();
        })
        .catch(() => {
          this.setCopy();
        });
    },

    setCopy() {
      var textArea = document.createElement("textarea");
      textArea.value = this.forgetForm.password;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("copy");
      document.body.removeChild(textArea);

      this.$modal.msgSuccess("已复制到剪切板");
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.logo-div {
  width: 100%;
  height: auto;
  text-align: center;
  margin-bottom: 45px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-div img {
  width: 132px;
  height: 132px;
  margin-right: 16px;
  float: left;
}

.login {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/images/login_bg.png");
  background-size: cover;
  background-position: bottom center;
}

.login-form .title {
  font-family: HarmonyOS Sans SC;
  font-weight: 700;
  color: #333333;
  line-height: 72px;
}

.login-form .title p {
  margin: 0;
}

.login-form .title p:first-child {
  font-size: 48px;
}

.login-form .title p:last-child {
  font-size: 40px;
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 393px;
  height: auto;

  .el-input {
    height: 38px;

    input {
      height: 38px;
      line-height: 38px;
      border: none;
      border-bottom: 1px solid #dcdfe6;
      border-radius: 0;
      padding: 0 12px;
    }

    input::placeholder {
      font-family: HarmonyOS Sans SC;
      font-size: 14px;
      color: #c0c4cc;
    }
  }

  .input-icon {
    height: 38px;
    width: 14px;
    margin-left: 2px;
  }

  .el-form-item {
    margin-bottom: 20px;
  }

  .el-form-item:last-child {
    margin-bottom: 0;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 103px;
  height: 38px;
  float: right;
  border-radius: 3px;
  overflow: hidden;

  img {
    width: 100%;
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 10px;
  width: 100%;
  text-align: center;
  color: #808080;
  font-family: Arial;
  font-size: 14px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}

.login-form .el-button {
  width: 391px;
  height: 40px;
  border-radius: 4px;

  font-family: HarmonyOS Sans SC;
  font-size: 14px;
  color: #ffffff;
}

.text_css {
  color: red;
  font-size: 16px;
  line-height: normal;
}

.text_css_14 {
  font-size: 14px;
}

@media (max-width: 1220px) {
  .center_bg {
    transform: scale(0.8);
  }
}

@media (max-width: 1130px) {
  .center_bg {
    transform: scale(0.8) !important;
  }

  .c_right {
    width: calc(100% - 594px) !important;
  }

  .c_left {
    margin-right: 70px !important;
  }
}

@media (max-width: 1120px) {
  .center_bg {
    transform: scale(0.7) !important;
  }

  .c_right {
    width: calc(100% - 554px) !important;
  }

  .c_left {
    margin-right: 60px !important;
    margin-left: 60px !important;
  }
}

@media (max-width: 1160px) {
  .center_bg {
    transform: scale(0.7) !important;
  }

  .c_right {
    width: calc(100% - 494px) !important;
  }

  .c_left {
    margin-right: 30px !important;
    margin-left: 30px !important;
  }
}

@media (max-width: 734px) {
  .center_bg {
    transform: scale(0.6) !important;
  }
}

@media (max-width: 600px) {
  .center_bg {
    transform: scale(0.5) !important;
  }
}

.center_bg {
  width: 1200px;
  height: 695px;
  border-radius: 55px;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08),
    0px 2px 6px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.c_left {
  width: 489px;
  height: 441px;
  float: left;
  margin-left: 80px;
  margin-right: 120px;
}

.c_left img {
  width: 100%;
  height: 100%;
}

.c_right {
  width: calc(100% - 689px);
  float: right;
}

.label_css {
  font-family: HarmonyOS Sans SC;
  font-size: 20px;
  color: #000000;
}

.msg_code {
  width: 103px;
  height: 38px;
  border: 1px solid #ddd;

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.msg_code span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.one_span {
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #1890ff;
  cursor: pointer;
}
.two_span {
  width: 100%;
  height: 100%;
  color: #000;
}
</style>

<style>
.login-btn {
  background: #1890ff !important;
  border-color: #1890ff !important;
}

.login-btn:hover {
  background: #1890ff !important;
  border-color: #1890ff !important;
}

.lo_form_css .el-form-item__error {
  top: 64px !important;
}

.lo_form_css {
  margin-bottom: 9px !important;
}

/* 手机端样式 */

.phone_login {
  width: 100%;
}

.wxroot_css {
  width: 85%;
  height: auto;
  transform: scale(1) !important;
  box-shadow: none;
}

.wxroot_css .c_right {
  width: 100% !important;
}

.wxroot_css .login-form {
  width: 100%;
}

.wxroot_css .login-form .title {
  line-height: 53px;
}

.wxroot_css .logo-div {
  margin-bottom: 50px;
}

.wxroot_css .logo-div img {
  width: 90px;
  height: 90px;
}

.wxroot_css .title p:first-child {
  font-size: 42px;
}

.wxroot_css .title p:last-child {
  font-size: 20px;
}

.wxroot_css .label_css {
  font-size: 18px;
}

.wxroot_css .login-form .el-form-item {
  margin-bottom: 12px;
}

.wxForm_css .el-form-item {
  margin-bottom: 18px;
}

.wxForm_css .el-form-item__label {
  line-height: 28px;
}
</style>
